<template>
    <view :data-theme="globPrimary">
        <view class="falce-container" v-if="faceStatus && bangidign == 0">
            <u-navbar title="人脸认证"></u-navbar>
            <view class="face-data">
                <u-image
                    :width="610"
                    :height="610"
                    class="face-bg"
                    src="@/static/images/face_placeholder.png"
                ></u-image>
                <edu-button
                    type="primary"
                    plain
                    @click="handleRemove"
                    class="btn"
                    >解除绑定</edu-button
                >
            </view>
        </view>
        <edu-face
            ref="refFace"
            title="人脸认证"
            @confirm="onPhotoSuccess"
            :custom-back="onBack"
        >
            <view slot="footer" class="falce-btn">
                <view v-if="!faceFile" class="btn">
                    <edu-button
                        type="primary"
                        @click="onPhoto"
                        :disabled="photoLoading"
                    >
                        <u-icon
                            name="camera-fill"
                            color="#fff"
                            size="28"
                            v-if="!photoLoading"
                        ></u-icon>
                        {{ photoLoading ? "拍照中…" : "拍照" }}
                    </edu-button>
                </view>
                <view v-if="faceFile && !photoLoading" class="btn">
                    <edu-button
                        type="primary"
                        plain
                        @click="onRemake"
                        :disabled="submitLoading"
                        >重拍</edu-button
                    >
                </view>
                <view v-if="faceFile && !photoLoading" class="btn">
                    <edu-button
                        type="primary"
                        @click="onSubmit"
                        :disabled="submitLoading"
                        >{{ submitLoading ? "审核中…" : "确认" }}</edu-button
                    >
                </view>
            </view>
        </edu-face>
    </view>
</template>

<script>
import { mapGetters } from "vuex";
import { uploadFile } from "@/utils/uploadFile.js";
export default {
    data() {
        return {
            bangidign: 0,
            faceFile: null,
            photoLoading: false,
            submitLoading: false,
        };
    },
    computed: {
        ...mapGetters({
            globPrimary: "designSetting/getGlobTheme",
            userInfo: "user/getUserInfo",
        }),
        faceStatus() {
            return this.userInfo.face_verified;
        },
    },
    mounted() {
        if (!this.faceStatus || this.bangidign == 1) {
            this.$refs.refFace.onFace();
        }
    },
    methods: {
        // 解除绑定
        handleRemove() {
            this.bangidign = 1;
            this.$refs.refFace.onFace();
        },
        // 拍照
        onPhoto() {
            this.photoLoading = true;
            this.$refs.refFace.onPhoto();
        },
        // 拍照成功
        onPhotoSuccess(file) {
            this.faceFile = file;
            this.photoLoading = false;
        },
        // 重拍
        onRemake() {
            this.$refs.refFace.resetPhoto();
            this.faceFile = null;
        },
        /*完成拍照并对其照片进行上传*/
        onSubmit(file) {
            this.submitLoading = true;
            if (this.bangidign === 1) {
                // 解绑人脸
                uploadFile("/user/tencent/face/person/delete", this.faceFile)
                    .then((res) => {
                        this.$u.toast(res.msg);
                        this.$store.dispatch("user/setUserInfo");
                        setTimeout(() => {
                            this.$u.route({
                                type: "back",
                            });
                            this.submitLoading = false;
                            this.onRemake();
                        }, 300);
                    })
                    .catch((err) => {
                        this.$u.toast(err.msg);
                        setTimeout(() => {
                            this.faceFile = null;
                            this.onRemake();
                            this.submitLoading = false;
                        }, 300);
                    });
            } else {
                // 绑定人脸
                uploadFile("/user/tencent/face/person", this.faceFile)
                    .then((res) => {
                        this.$u.toast(res.msg);
                        this.$store.dispatch("user/setUserInfo");
                        setTimeout(() => {
                            this.$u.route({
                                type: "back",
                            });
                            this.submitLoading = false;
                            this.onRemake();
                        }, 300);
                    })
                    .catch((err) => {
                        this.$u.toast(err.msg);
                        setTimeout(() => {
                            this.faceFile = null;
                            this.onRemake();
                            this.submitLoading = false;
                        }, 300);
                    });
            }
        },
        // 返回
        onBack() {
            uni.navigateBack();
        },
    },
};
</script>

<style lang="scss" scoped>
.falce-container {
    min-height: 100vh;
    background-color: #ffffff;
    .face-data {
        margin-top: 140rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        .btn {
            width: 256rpx;
            margin: 330rpx auto 0;
        }
    }
}
.falce-btn {
    margin-top: 100rpx;
    display: flex;
    justify-content: center;
    .btn {
        width: 256rpx;
        margin: 0 20rpx;
    }
    /deep/.u-icon {
        margin-right: 10rpx;
    }
}
</style>
